<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/treetable/jquery.treetable.css" />
    <link rel="stylesheet" href="/css/treetable/jquery.treetable.theme.default.css" />
    <script src="/js/libs/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-select.min.js"></script>
    <script src="/js/jq.js"></script>
    <script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/dict.js"></script>
    <script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script src="/js/my/ztree-menu.js"></script>
    <script src="/js/my/permission.js"></script>
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/js/libs/jquery.treetable.js"></script>
</head>
<body>
<div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <header style="height: 100%">
            <div align="left">
                <table style="width: 100%">
                    <tr>
                        <td>
                        </td>
                        <td align="right">
                            <button class="layui-btn layui-btn-sm" onclick="openIFrame('/pages/fas/goodsCategory/addGoodsCategory.html?parentId=0&parentName=root', '添加商品类型')" permission="fas:goodsCategory:add">
                                <i class="layui-icon">&#xe608;</i> 添加
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </header>

        <div>
            <div class="widget-body no-padding">
                <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                    <tr>
                        <th>分类名称</th>
                        <th>是否可用</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var pers = checkPermission();
    initGoodsCategoryList();

    function initGoodsCategoryList(){
        $.ajax({
            type : 'get',
            url : '/goodsCategory/list',
            contentType: "application/json; charset=utf-8",
            async:false,
            success : function(json) {
                if (json.code === 0) {
                    var data = json.data;
                    var length = data.length;
                    for(var i=0; i<length; i++){
                        var d = data[i];
                        var id = d['id'];

                        var tr = "<tr data-tt-id='" + id + "' data-tt-parent-id='" + d['parentId'] + "'>";

                        tr += '<td>' + d['name'] + '</td>';
                        tr += '<td>' + getDict('boolean')[d['usable']] + '</td>';
                        tr += '<td>' + d['sort'] + '</td>';

                        var name = d['name'];
                        var href = "updateGoodsCategory.html?id=" + id;
                        var edit = buttonEdit(href, "fas:goodsCategory:add", pers);
                        var del = buttonDel(id, "fas:goodsCategory:del", pers);
                        var add = buttonAdd("addGoodsCategory.html?parentId=" + id + "&parentName=" + name, "fas:goodsCategory:add", pers);
                        tr += "<td>" + edit + del + add + "</td>";
                        tr += "</tr>";
                        $("#dt-table").append(tr);
                    }
                }
            }
        });
    }

    layui.use('layer', function(){
        var layer = layui.layer;
    });

    function del(id){
        layer.confirm('确定要删除吗？', {
            btn : [ '确定', '取消' ]
        }, function() {
            $.ajax({
                type : 'delete',
                url : '/goodsCategory/' + id,
                success : function(data) {
                    location.reload();
                }
            });
        });
    }

    function buttonAdd(href, permission, pers){
        if(permission){
            if ($.inArray(permission, pers) < 0) {
                return "";
            }
        }

        var btn = $("<button class='layui-btn layui-btn-xs' title='添加' onclick='openIFrame(\"" + href +"\") '><i class='layui-icon'>&#xe608;</i></button>");
        return btn.prop("outerHTML");
    }


    var option = {
        expandable : true,
        clickableNodeNames : true,
        onNodeExpand : function() { // 展开
            var d = this;
            // console.log(d['id']);
            // console.log(d['parentId']);
        },
        onNodeCollapse : function() { // 收起
            var d = this;
            // console.log(d['id'] + "Collapse");
            // console.log(d['parentId'] + "Collapse");
        }

    };

    $("#dt-table").treetable(option).treetable('expandAll');
</script>
